import React, {Component} from 'react'
import {Alert, Dimensions, StyleSheet, View} from 'react-native'
import {SearchBar} from '@ant-design/react-native';
import NavBar from 'react-native-nav'
import {connect} from 'react-redux';
import Recommend from './components/recommend'

const {height, width} = Dimensions.get('window')

class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '美食',
        };
        this.onChange = value => {
            this.setState({value});
        };
        this.clear = () => {
            this.setState({value: ''});
        };
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <NavBar style={styles} statusBar={{backgroundColor:'rgba(0,0,0,0)'}}>

                    <View style={styles.searchBar}>
                        <SearchBar
                            placeholder={'尽情畅所欲言吧！'}
                            placeholder="搜索"
                            onSubmit={value => Alert.alert(value)}
                            showCancelButton
                        />
                    </View>

                </NavBar>


                <Recommend/>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    statusBar: {
    },
    navBar: {
        backgroundColor: '#efeff4',
        height: height * 0.081939799,
    },
    title: {
        color: '#rgba(0, 0, 0, 1)',
    },
    buttonText: {
        color: '#rgba(0, 0, 0, 0.45)',
    },
    searchBar: {
        flex: 1,
        backgroundColor: 'red',
        margin: 0
    }
})


export default connect(
    (state) => {
        return {
            mainNavigation: state.mainNavigation
        }
    }
)(Index)


